<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.tenantId" auto-complete="off"
        :placeholder="$t('login.tenantId')">
        <i slot="prefix" class="icon-quanxian" />
      </el-input>
    </el-form-item>
    <el-form-item class="yonghusty" style="background-color: #F5F5F5" prop="username">
      <div class="yonghusty">
        <img style="width: 23px;height: 23px;margin-left: 14px" src="/img/login/ic_jingyuan@2x.png">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
          <line x1="10" y1="0" x2="10" y2="20" stroke="#C8D0E4" stroke-width="1" />
        </svg>
        <input class="inputsty" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
          placeholder="警员号">
      </div>
    </el-form-item>
    <el-form-item style="background-color: #F5F5F5;margin-top: 25px" prop="password">
      <div class="yonghusty">
        <img style="width: 23px;height: 23px;margin-left: 14px;" src="/img/login/ic_mima@2x.png">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
          <line x1="10" y1="0" x2="10" y2="20" stroke="#C8D0E4" stroke-width="1" />
        </svg>
        <input class="inputsty" @keyup.enter="handleLogin" v-model="loginForm.password" auto-complete="off"
          type="password" placeholder="密码">
      </div>
    </el-form-item>
    <el-form-item style="margin-top: 45px">
      <div class="logindiv" @click.native.prevent="handleLogin" @click="handleLogin">
        登录
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import {
    info
  } from "@/api/system/tenant";
  import {
    getCaptcha
  } from "@/api/user";
  import {
    getTopUrl
  } from "@/util/util";
  import {
    getRoutes
  } from '@/api/system/menu'
  export default {
    name: "userlogin",
    data() {
      return {
        centerDialogVisible: false,
        tenantMode: this.website.tenantMode,
        loginForm: {
          //租户ID
          tenantId: "000000",
          //部门ID
          deptId: "",
          //角色ID
          roleId: "",
          //用户名
          username: "",
          //密码
          password: "",
          //账号类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "",
        },
        loginRules: {
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 1,
              message: "密码长度最少为6位",
              trigger: "blur"
            }
          ]
        },
        passwordType: "password",
        userBox: false,
        userForm: {
          deptId: '',
          roleId: ''
        },
        userOption: {
          labelWidth: 70,
          submitBtn: true,
          emptyBtn: false,
          submitText: '登录',
          column: [{
              label: '部门',
              prop: 'deptId',
              type: 'select',
              props: {
                label: 'deptName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/dept/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择部门",
                trigger: "blur"
              }],
            },
            {
              label: '角色',
              prop: 'roleId',
              type: 'select',
              props: {
                label: 'roleName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/role/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择角色",
                trigger: "blur"
              }],
            },
          ]
        }
      };
    },
    created() {
      this.getTenant();
      this.refreshCode();
    },
    mounted() {},
    watch: {
      'loginForm.deptId'() {
        const column = this.findObject(this.userOption.column, "deptId");
        if (this.loginForm.deptId.includes(",")) {
          column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
          column.display = true;
        } else {
          column.dicUrl = '';
        }
      },
      'loginForm.roleId'() {
        const column = this.findObject(this.userOption.column, "roleId");
        if (this.loginForm.roleId.includes(",")) {
          column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
          column.display = true;
        } else {
          column.dicUrl = '';
        }
      }
    },
    computed: {
      ...mapGetters(["tagWel", "userInfo"])
    },
    props: [],
    methods: {
      refreshCode() {
        if (this.website.captchaMode) {
          getCaptcha().then(res => {
            const data = res.data;
            this.loginForm.key = data.key;
            this.loginForm.image = data.image;
          })
        }
      },
      showPassword() {
        this.passwordType === "" ?
          (this.passwordType = "password") :
          (this.passwordType = "");
      },
      submitLogin(form, done) {
        if (form.deptId !== '') {
          this.loginForm.deptId = form.deptId;
        }
        if (form.roleId !== '') {
          this.loginForm.roleId = form.roleId;
        }
        this.handleLogin();
        done();
      },
      handleLogin() {
        // this.$router.push({path:'/wel/index'})
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              if (this.website.switchMode) {
                const deptId = this.userInfo.dept_id;
                const roleId = this.userInfo.role_id;
                if (deptId.includes(",") || roleId.includes(",")) {
                  this.loginForm.deptId = deptId;
                  this.loginForm.roleId = roleId;
                  this.userBox = true;
                  this.$store.dispatch("LogOut").then(() => {
                    loading.close();
                  });
                  return false;
                }
              }
              // this.$router.push({path: this.tagWel.value});
              getRoutes().then(res => {
                let data = res.data.data;
                let path = '/';
                if (data && data.length) {
                  path = data[0].children[0].path;
                  this.$router.options.routes.forEach(item => {
                    if (item.path === '/') {
                      item.redirect = path;
                    }
                  })
                }
                this.$router.push({
                  path: path
                })
              })
              loading.close();
            }).catch(() => {
              loading.close();
              this.refreshCode();
            });
          }
        });

      },
      getTenant() {
        let domain = getTopUrl();
        // 临时指定域名，方便测试
        //domain = "https://bladex.vip";
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.tenantMode = false;
            this.loginForm.tenantId = data.data.tenantId;
            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
          }
        })
      },
      forgotPassword() {
        this.centerDialogVisible = true;
      }
    }
  };
</script>

<style scoped lang="scss">
  .el-myDialog {
    ::v-deep.el-dialog {
      border-radius: 12px;
    }
  }

  ::v-deep.el-dialog--center .el-dialog__body {
    text-align: center;
    padding: 25px 25px 30px;
  }

  ::v-deep.el-dialog__body {
    padding: 30px 20px;
    color: #222A39;
    font-size: 15px;
    font-weight: 500;
    word-break: break-all;
  }

  .logindiv {
    user-select: none;
    text-align: center;
    cursor: pointer;
    width: 380px;
    height: 44px;
    color: white;
    background-color: #2F5EA4;
    border-radius: 4px 4px 4px 4px;
  }

  .yonghusty {
    /*background: rgba(58,146,249,0.1400);*/
    border: 1px solid #C8D0E4;
    border-radius: 8px;
    height: 44px;
    width: 380px;
    display: flex;
    align-items: center;
    justify-items: center;
  }

  .inputsty {
    border: none;
    /*background-color: transparent;*/
    outline: none;
    background-color: #F5F5F5 !important;
  }

  .inputsty::placeholder {
    color: #959FBA
  }
</style>
